<template>
  <span class="EmoIcon" :style="{ fontSize: font_size + 'px' }">{{ meta?.emoji || "😊" }}</span>
</template>

<script lang="ts">
import { defineComponent, type App } from "vue";
export default defineComponent({
  name: "Emo-Icon",
  install(app: App) {
    app.component("Emo-Icon", this);
  },
});
</script>

<script setup lang="ts">
import { computed, inject } from "vue";
import { type SizeType, EmojiSizeEnum } from "@/type";
// import { emojiMap, type EmojiType } from "./EmojiList";

interface PropsType {
  name?: string;
  size?: SizeType;
}
const props = withDefaults(defineProps<PropsType>(), {
  name: "smile",
  size: "middle",
});
// 编译尺寸
const font_size = computed(() => {
  const size = EmojiSizeEnum[props.size];
  return size ? size : EmojiSizeEnum.middle;
});
// 组件信息渲染
const EMPTY_EMOJI = { emoji: "❓", name: "unknown" }; // 表情兜底
const emojiMap = inject("emojiMap", new Map());
const meta = computed(() => emojiMap.get(props.name) ?? EMPTY_EMOJI);
</script>

<style scoped lang="scss">
.EmoIcon {
  cursor:default;
}
</style>
